<template>
  <div class="dashboard-table-panel">
  <!--<div>-->

    <div class="table-title">主控点</div>
    <el-table
      ref="controlTable"
      :data="controlTableData"
      :show-header="false"
      highlight-current-row
      @current-change="handleControlTableCurrentChange"
      height="150"
      stripe
      style="width: 100%">
      <el-table-column
        prop="area"
        label="区域"
        width="80">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
      <el-table-column
        prop="spec1"
        label="指标1"
        width="80">
      </el-table-column>
      <el-table-column
        prop="spec2"
        label="指标2"
        width="80">
      </el-table-column>
    </el-table>

    <div class="table-title">水厂</div>
    <el-table
      ref="waterworksTable"
      :data="waterworksTableData"
      :show-header="false"
      highlight-current-row
      @current-change="handleWaterworksTableCurrentChange"
      height="110"
      stripe
      style="width: 100%">
      <el-table-column
        prop="waterworks"
        label="水厂">
      </el-table-column>
      <el-table-column
        prop="spec"
        label="指标"
        >
      </el-table-column>
    </el-table>

  </div>
</template>

<script>
  import axios from 'axios';
  // import MockAdapter from 'axios-mock-adapter';

  export default {

    data() {
      return {
        controlTableData: [],

        waterworksTableData: [],
      }
    },

    created: function() {

      // let mock = new MockAdapter(axios);
      // mock
      //   .onGet('/dispatch/monitor/info')
      //   .reply(200,
      //     // {
      //     //   "code": 0,
      //     //   "message": "",
      //     //   "data": {
      //     //     "masterControlInfos": [
      //     //       {
      //     //         "id":12345,
      //     //         "name": "中环",
      //     //         "address": "工行大厦",
      //     //         "curPressure": 98,
      //     //         "presChangemValue": 6,
      //     //         "alarmStatus": 1
      //     //       },
      //     //       {
      //     //         "id":12346,
      //     //         "name": "下环",
      //     //         "address": "南林小区",
      //     //         "curPressure": 108,
      //     //         "alarmStatus": 2
      //     //       }
      //     //     ],
      //     //     "waterworksInfos": [
      //     //       {
      //     //         "id":12347,
      //     //         "name": "三坪水厂",
      //     //         "totalFlow": 98
      //     //       },
      //     //       {
      //     //         "id":12348,
      //     //         "name": "第五净化水厂",
      //     //         "totalFlow": 129
      //     //       }
      //     //     ]
      //     //   }
      //     // }
      //     {"code":0,"message":"","data":{"waterworksInfos":[{"id":"Re-001","name":"山顶水池","totalFlow":0.0},{"id":"Re-002","name":"减压水池","totalFlow":0.0},{"id":"Re-003","name":"三坪水厂","totalFlow":3658.153},{"id":"Re-004","name":"第五净化水厂","totalFlow":5926.66},{"id":"Re-005","name":"第六净化水厂","totalFlow":1246.127},{"id":"Re-006","name":"第二净化水厂","totalFlow":0.0}],"masterControlInfos":[{"id":"YL-006","name":"康城大泵房绿化林带旁","address":"","curPressure":1.0,"presChangemValue":0.07999999999999996,"alarmStatus":0},{"id":"YL-008","name":"世纪大道NEW","address":"","curPressure":0.88,"presChangemValue":0.17000000000000004,"alarmStatus":0},{"id":"YL-028","name":"南林小区","address":"","curPressure":0.73,"presChangemValue":0.050000000000000044,"alarmStatus":0},{"id":"YL-034","name":"工行大厦","address":"","curPressure":0.28,"presChangemValue":0.07000000000000003,"alarmStatus":0}]}}
      //   )
      //   .onAny().passThrough();

      axios.get('/dispatch/monitor/info')
        .then(response => {
          let rspData = response.data;
          let controlTableRsp = rspData.data.masterControlInfos;
          this.controlTableData = controlTableRsp.map(({id, alarmStatus, address, name, curPressure, presChangemValue}) => ({
            id,
            alarmStatus,
            address,
            area: name,
            spec1: `${curPressure} MPa`,
            spec2: `${presChangemValue || 0} MPa`,
          }))
          let waterworksTableRsp = rspData.data.waterworksInfos;
          // console.log(JSON.stringify(waterworksTableRsp, 0, 2));
          this.waterworksTableData = waterworksTableRsp.map(({id, name, totalFlow}) => ({
            id,
            waterworks: name,
            spec: `总流量 ${totalFlow} m3/h`
          }))
        });
    },

    methods: {
      // setCurrent(row) {
      //   this.$refs.controlTable.setCurrentRow(row);
      // },
      handleControlTableCurrentChange(val) {
        if (val) {
          this.$refs.waterworksTable.setCurrentRow();
          // this.$emit('selectMonitorData', [0, 0])
          console.log(val)
          this.$emit('selectMonitorData', val.address)
        }
        else {
          this.$emit('selectMonitorData', null)
        }
      },
      handleWaterworksTableCurrentChange(val) {
        if (val) {
          this.$refs.controlTable.setCurrentRow();
          console.log(val)
        }
      },
    }

  }
</script>

<style lang="sass" scoped>
  .dashboard-table-panel
    position: absolute
    z-index: 20
    top: 120px
    left: 30px
    width: 436px
    height: 350px
    padding: 20px
    background-color: #fff
    box-shadow: 1px 1px 5px #eae7e0
    border-radius: 5px
    opacity: 0.96
  .table-title
      text-align: center
      font-size: 14px
      font-weight: bolder
      color: #222
</style>


